<template>
  <div class="data-statistics">
    <div class="btntop">
      <i class="el-icon-location-information" />
      {{ allparams.line? allparams.line.lineName:allparams.lineName }} {{ allparams.lineSite?allparams.lineSite.siteName:allparams.siteName }}
      {{ allparams.pillar?allparams.pillar.pillarNum: allparams.pillarNum }}#支柱号 {{ allparams.pillar?allparams.pillar.roadMark:allparams.roadMark }}
    </div>
    <div slot="valueform" v-loading="loading" class="value-form" style="padding-top:10px;">
      <div v-for="i in shownum" :key="i" class="item">
        <div class="title">{{ i }}C缺陷</div>
        <div class="imglist">
          <el-scrollbar v-if="isshowImg" style="height:100%;">
            <el-image
              v-for="(url,j) in formdataNum[i+'C'].filePath"
              :key="j"
              style="width: 120px; height: 100px;padding-right:5px;"
              :src="getRelativeImage(url)"
              :preview-src-list="getUrl(url)"
              @error="handleImgError" />
          </el-scrollbar>
        </div>

        <table style="border-collapse:collapse">
          <tr>
            <th class="thtitle">缺陷类型</th>
            <td @mouseover="tdhover($event,formdataNum[i+'C'])">
              <el-tooltip v-if="formdataNum[i+'C'].isshow" effect="dark" :content="formdataNum[i+'C'].userDefectTypeName" placement="top-start">
                <span style="display:inline-block;width:102%;">{{ formdataNum[i+'C'].userDefectTypeName||"" }}</span>
              </el-tooltip>
              <span v-else>{{ formdataNum[i+'C'].userDefectTypeName||"" }}</span>
            </td>
            <th class="thtitle">缺陷等级</th>
            <td>{{ formdataNum[i+'C'].userGradeName||"" }}</td>
            <th class="thtitle">检测日期</th>
            <td>{{ formdataNum[i+'C'].findDt||"" }}</td>
          </tr>
          <tr>
            <th class="thtitle">缺陷描述</th>
            <td colspan="5" @mouseover="tdhover($event,formdataNum[i+'C'],1)">
              <el-tooltip v-if="formdataNum[i+'C'].isshowdesc" effect="dark" :content="formdataNum[i+'C'].desc" placement="top-start">
                <span style="display:inline-block;width:102%;">{{ formdataNum[i+'C'].desc||"" }}</span>
              </el-tooltip>
              <span v-else>{{ formdataNum[i+'C'].desc||"" }}</span>
            </td>
          </tr>
          <tr>
            <th class="thtitle">状态</th>
            <td v-if="formdataNum[i+'C'].defectStatus===0">未处理</td>
            <td v-else-if="formdataNum[i+'C'].defectStatus===1">已审核</td>
            <td v-else-if="formdataNum[i+'C'].defectStatus===2">下发</td>
            <td v-else-if="formdataNum[i+'C'].defectStatus===3">已整改</td>
            <td v-else-if="formdataNum[i+'C'].defectStatus===4">已销号</td>
            <td v-else />
            <th class="thtitle">复核日期</th>
            <td colspan="3">{{ formdataNum[i+'C'].checkDt||"" }}</td>
          </tr>
          <tr>
            <th class="thtitle">处理日期</th>
            <td>{{ formdataNum[i+'C'].solveDt||"" }}</td>
            <th class="thtitle">处理人</th>
            <td colspan="3">{{ formdataNum[i+'C'].solvePerson||"" }}</td>
          </tr>
          <tr>
            <th colspan="6" style="padding:0;text-align:center;height:33px;">
              <el-pagination
                v-if="formdata[i+'C']"
                :page-size="1"
                layout="prev, pager, next, jumper"
                :total="formdata[i+'C'].length"
                @current-change="handleCurrentChange($event,i)" />
            </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { findDefectCorrelationAnalysis } from '@/api/cms/data-statistics'
export default {
  name: 'DialogInner',
  components: {
  },
  data() {
    return {
      loading: false,
      shownum: 4,
      allparams: {
        line: {},
        lineSite: {},
        pillar: {}
      },
      isshowImg: true,
      formdata: {}, // 查询处理的数据
      formdataNum: {
        '1C': {},
        '2C': {},
        '3C': {},
        '4C': {}
      },
      valuek: {
        deptCode: '', // 所选得供电段
        selectLin: '', // 选择线路
        directionId: '', // 行别
        siteId: '', // 区间
        pillarNum: ''
      }
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    tdhover(el, item, num) {
      if (el.currentTarget.offsetWidth >= el.target.offsetWidth) return
      if (num) {
        this.$set(item, 'isshowdesc', true)
      } else {
        this.$set(item, 'isshow', true)
      }
    },
    handleCurrentChange(pagenum, num) {
      this.isshowImg = false
      this.$nextTick(_ => {
        this.isshowImg = true
        this.$set(this.formdataNum, num + 'C', this.formdata[num + 'C'][pagenum - 1])
      })
    },
    getFromvalue(val, num) {
      this.allparams = val
      var that = this
      let obj = {}
      if (num) {
        obj = val
      } else {
        obj = {
          pillarNum: val.pillar ? val.pillar.pillarNum : val.pillarNum,
          pillarCode: val.pillar ? val.pillar.pillarCode : val.pillarCode,
          lineSiteCode: val.lineSite ? val.lineSite.siteCode : val.lineSiteCode,
          deptCode: val.deptCode,
          lineId: val.line ? val.line.lineId : val.lineId, // 选择线路
          directionId: val.directionId, // 行别
          startTime: val.startTime || '',
          endTime: val.endTime || ''
        }
      }

      this.loading = true
      findDefectCorrelationAnalysis(obj).then(res => {
        this.loading = false
        this.formdata = res.data
        that.formdataNum = {
          '1C': that.formdata['1C'] ? that.formdata['1C'][0] : {},
          '2C': that.formdata['2C'] ? that.formdata['2C'][0] : {},
          '3C': that.formdata['3C'] ? that.formdata['3C'][0] : {},
          '4C': that.formdata['4C'] ? that.formdata['4C'][0] : {}
        }
      }).catch(_ => {
        this.loading = false
      })
    },
    getUrl(url) {
      if (typeof (url) === 'object') {
        var obj = []
        for (const item of url) {
          // obj.push('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg')
          obj.push(process.env.VUE_APP_BASE_API + '/dfile/file/download?fileUrl=' + item +
        '&access_token=' + getToken())
        }
        return obj
      } else {
        // return 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        return [process.env.VUE_APP_BASE_API +
        '/dfile/file/download?fileUrl=' + url +
        '&access_token=' + getToken()]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.data-statistics{
  height: 100%;
  padding: 0;
  border: 1px solid #aed0ea;
  .btntop{
    height: 42px;
    line-height: 42px;
    padding-left: 10px;
    font-size: 16px;
    background: #006fc5;
    color: white;
    border-bottom: 1px solid #aed0ea;
  }
  .value-form{
    height: calc(100% - 42px);
  }
}
.el-loading-parent--relative{
  position: initial!important;
}
</style>
